<template>
  <div>
    <div class="my-container">
      <div class="myHead">
        <!-- <van-nav-bar
          left-text="我的"
          class="mine-nav-bar"
          @click="$router.back()"
        /> -->
        <!-- 头像区域 -->
        <div class="header not-login">
          <div class="login-btn">
            <span class="avatar"><i class="iconfont icon-wode"></i></span>
            <span class="text" @click="$router.push('/login')">点击登录</span>
          </div>
        </div>
      </div>
      <div class="my-content">
        <div class="information">
          <van-grid :border="false" :column-num="4">
            <van-grid-item to="/mine/personalInfo">
              <i class="iconfont icon-yangshi_icon_tongyong_record"></i>
              <span class="text">个人资料</span>
            </van-grid-item>
            <van-grid-item to="/MyAttention">
              <i class="iconfont icon-wode"></i>
              <span class="text">我的关注</span>
            </van-grid-item>
            <van-grid-item>
              <i class="iconfont icon-pingjia"></i>
              <span class="text">我的评价</span>
            </van-grid-item>
            <van-grid-item to="/Domesticworkers">
              <i class="iconfont icon-zuojitianchong"></i>
              <span class="connect">已联系家政员</span>
            </van-grid-item>
          </van-grid>
        </div>
        <!-- 记录区域 -->
        <div class="record">
          <van-cell is-link>
            <i class="iconfont icon-yangshi_icon_tongyong_record"></i>
            <span>找家政服务记录</span>
          </van-cell>
          <van-cell is-link
            ><i class="iconfont icon-jilumian"></i>
            <span>家政求职记录</span>
          </van-cell>
        </div>

        <!-- 身份区域 -->
        <div class="identity">
          <van-cell is-link @click="showPopup"
            ><i class="iconfont icon-renzheng-tianchong"></i>
            <span>身份认证通道</span>
          </van-cell>
          <van-popup
            v-model="show"
            position="bottom"
            :style="{ height: '15%' }"
          >
            <!-- 点击跳转到对应页面 -->
            <div @click="$router.push('/authorize')">家服人员授权人证</div>
            <div @click="$router.push('/admin')">家服公司管理员认证</div>
          </van-popup>
          <van-cell is-link to="/aboutMy"
            ><i class="iconfont icon-guanyu"></i>
            <span>关于我们</span>
          </van-cell>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false
    }
  },

  methods: {
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-hairline--bottom::after {
  border-bottom-width: 0;
  // background-color: #3f51b5;
}
.my-container {
  .myHead {
    width: 750px;
    height: 472px;
    background-color: #3f51b5;
    .van-nav-bar{
      background-color: #fff;
    }
    // /deep/.mine-nav-bar {
      // .van-nav-bar__content {
      //   background-color: #3f51b5;
      // }
      // .van-nav-bar__text {
      //   color: #fff;
      //   font-size: 32px;
      //   // padding-top: 74px;
      //   // margin-left: 38px;
      // }
    // }
    .header {
      // border-top: solid #3f51b5;
      height: 340px;
      background-size: cover;
    }
    .not-login {
      display: flex;
      margin-top: -10px;
      background-color: #3f51b5;
      justify-content: center;
      align-items: center;
      .login-btn {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .avatar {
        position: relative;
        width: 136px;
        height: 134px;
        margin-bottom: 15px;
        // background-color: #EEECEC ;
        border-radius: 50%;
        margin-bottom: 34px;
        background-color: rgba(238, 236, 236, 100);
        .iconfont {
          font-size: 64px;
          position: absolute;
          top: 36px;
          left: 36px;
          color: #979191;
        }
      }
      .text {
        font-size: 28px;
        color: #fff;
      }
    }
  }
  /deep/ .my-content {
    width: 750px;
    height: 806px;
    margin-top: -60px;
    .information {
      width: 684px;
      height: 162px;
      margin-left: 36px;
      margin-right: 30px;
      margin-bottom: 28px;
      border-radius: 8px 8px 8px 8px;
      background-color: rgba(255, 255, 255, 100);
      z-index: 2;

      .item__content {
        width: 144px;
      }
      .iconfont {
        color: #979191;
        font-size: 42px;
      }
      .connect {
        display: block;
        margin-left: -5px;
        font-size: 24px;
      }
      .text {
        font-size: 24px;
      }
      .van-grid-item__content--center {
        // border-radius: 15px 15px;
        margin-top: 10px;
        // background-color:red;
        // margin-left: 15px;
        // margin-right: 15px;
      }
    }
  }
  /deep/.record {
    padding-left: 20px;
    margin-bottom: 50px;
    .van-cell {
      margin-bottom: 36px;
    }
    span {
      font-size: 26px;
    }
    .iconfont {
      display: inline-block;
      vertical-align: top;
      font-size: 48px;
      margin-right: 20px;
      color: #979191;
    }
  }
  /deep/.identity {
    padding-left: 20px;
    .van-cell {
      margin-bottom: 36px;
    }
    span {
      font-size: 26px;
    }
    .iconfont {
      display: inline-block;
      vertical-align: top;
      font-size: 48px;
      margin-right: 20px;
      color: #979191;
    }
  }
  .van-popup {
    div {
      margin-top: 32px;
      height: 58px;
      line-height: 58px;
      text-align: center;
      color: #101010;
      font-size: 26px;
    }
  }
}
</style>
